            <!-- Media Management Tab -->
            <div id="tabMediaManagement" class="tab-content">
                <div class="form-group" style="text-align: right; margin-bottom: 8px;">
                    <button class="btn btn-secondary" onclick="jumpToVectorStores()">Open Vector Stores</button>
                </div>
                <!-- GET /api/v1/media/ - List All Media Items -->
                <div class="endpoint-section" id="listAllMedia">
                    <h2>GET /api/v1/media/ - List All Media Items</h2>
                    <div class="form-group">
                        <label for="listAllMedia_page">Page:</label>
                        <input type="number" id="listAllMedia_page" value="1" name="page">
                    </div>
                    <div class="form-group">
                        <label for="listAllMedia_results_per_page">Results per page:</label>
                        <input type="number" id="listAllMedia_results_per_page" value="10" name="results_per_page">
                    </div>
                    <button class="api-button" onclick="makeRequest('listAllMedia', 'GET', '/api/v1/media/', 'query')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="listAllMedia_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="listAllMedia_response">---</pre>
                </div>

                <!-- POST /api/v1/media/search - Search Media Items -->
                <div class="endpoint-section" id="searchMediaItems">
                    <h2>POST /api/v1/media/search - Search Media Items</h2>
                    <p>Search media items based on criteria. Pagination is handled via query parameters.</p>
                    <div class="columns">
                        <div class="column">
                            <div class="form-group">
                                <label for="searchMediaItems_payload">Payload (SearchRequest JSON):</label>
                                <textarea id="searchMediaItems_payload" style="min-height: 200px;">{
    "query": "example search term",
    "fields": ["title", "content"],
    "exact_phrase": null,
    "media_types": ["video", "article"],
    "must_have": ["keyword1"],
    "must_not_have": ["keyword_exclude"],
    "sort_by": "relevance",
    "date_range": null,
    "boost_fields": {"title": 2.0, "content": 1.0}
}</textarea>
                            </div>
                        </div>
                        <div class="column">
                            <div class="form-group">
                                <label for="searchMediaItems_page">Page (Query Param):</label>
                                <input type="number" id="searchMediaItems_page" value="1" name="page">
                            </div>
                            <div class="form-group">
                                <label for="searchMediaItems_results_per_page">Results per page (Query Param):</label>
                                <input type="number" id="searchMediaItems_results_per_page" value="10" name="results_per_page">
                            </div>
                        </div>
                    </div>
                    <button class="api-button" onclick="makeRequest('searchMediaItems', 'POST', '/api/v1/media/search', 'json_with_query')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="searchMediaItems_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="searchMediaItems_response">---</pre>
                </div>

                <!-- GET /api/v1/media/{media_id} -->
                <div class="endpoint-section" id="getMediaItem">
                    <h2>GET /api/v1/media/{media_id} - Get Media Item Details</h2>
                    <div class="form-group">
                        <label for="getMediaItem_media_id">Media ID:</label>
                        <input type="number" id="getMediaItem_media_id" value="1">
                    </div>
                    <button class="api-button" onclick="makeRequest('getMediaItem', 'GET', '/api/v1/media/{media_id}', 'none')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="getMediaItem_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="getMediaItem_response">---</pre>
                </div>

                <!-- GET /api/v1/media/metadata-search -->
                <div class="endpoint-section" id="metadataSearch">
                    <h2>GET /api/v1/media/metadata-search - Search by Safe Metadata</h2>
                    <div class="form-group">
                        <label for="metadataSearch_filters">filters (JSON list of {field, op, value}):</label>
                        <input type="text" id="metadataSearch_filters" placeholder='[{"field":"doi","op":"eq","value":"10.1234/xyz"}]'>
                    </div>
                    <div class="form-group">
                        <label for="metadataSearch_field">Single Field:</label>
                        <input type="text" id="metadataSearch_field" placeholder="doi">
                    </div>
                    <div class="form-group">
                        <label for="metadataSearch_op">Operator:</label>
                        <input type="text" id="metadataSearch_op" value="icontains">
                    </div>
                    <div class="form-group">
                        <label for="metadataSearch_value">Value:</label>
                        <input type="text" id="metadataSearch_value" placeholder="Nature">
                    </div>
                    <div class="form-group">
                        <label for="metadataSearch_match_mode">Match Mode:</label>
                        <input type="text" id="metadataSearch_match_mode" value="all">
                    </div>
                    <button class="api-button" onclick="makeRequest('metadataSearch', 'GET', '/api/v1/media/metadata-search', 'query')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="metadataSearch_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="metadataSearch_response">---</pre>
                </div>

                <!-- GET /api/v1/media/by-identifier -->
                <div class="endpoint-section" id="byIdentifier">
                    <h2>GET /api/v1/media/by-identifier - Find by DOI/PMID/PMCID/arXiv/S2</h2>
                    <div class="form-group">
                        <label for="byIdentifier_doi">DOI:</label>
                        <input type="text" id="byIdentifier_doi">
                    </div>
                    <div class="form-group">
                        <label for="byIdentifier_pmid">PMID:</label>
                        <input type="text" id="byIdentifier_pmid">
                    </div>
                    <div class="form-group">
                        <label for="byIdentifier_pmcid">PMCID:</label>
                        <input type="text" id="byIdentifier_pmcid">
                    </div>
                    <div class="form-group">
                        <label for="byIdentifier_arxiv">arXiv ID:</label>
                        <input type="text" id="byIdentifier_arxiv">
                    </div>
                    <div class="form-group">
                        <label for="byIdentifier_s2">S2 paperId:</label>
                        <input type="text" id="byIdentifier_s2">
                    </div>
                    <button class="api-button" onclick="makeRequest('byIdentifier', 'GET', '/api/v1/media/by-identifier', 'query')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="byIdentifier_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="byIdentifier_response">---</pre>
                </div>

                <!-- PUT /api/v1/media/{media_id} -->
                <div class="endpoint-section" id="updateMediaItem">
                    <h2>PUT /api/v1/media/{media_id} - Update Media Item</h2>
                    <div class="form-group">
                        <label for="updateMediaItem_media_id">Media ID:</label>
                        <input type="number" id="updateMediaItem_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="updateMediaItem_payload">Payload (MediaUpdateRequest JSON):</label>
                        <textarea id="updateMediaItem_payload">{
    "title": "New Title (Optional)",
    "author": "New Author (Optional)",
    "content": "New content for the media item (Optional). If provided, a new version will be created.",
    "prompt": "Prompt for new version (Optional, if content is updated)",
    "analysis": "Analysis for new version (Optional, if content is updated)",
    "keywords": ["new_keyword1", "new_keyword2"]
}</textarea>
                    </div>
                    <button class="api-button" onclick="makeRequest('updateMediaItem', 'PUT', '/api/v1/media/{media_id}', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="updateMediaItem_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="updateMediaItem_response">---</pre>
                </div>
            </div>


            <!-- Media Versioning Tab -->
            <div id="tabMediaVersioning" class="tab-content">
                <!-- POST /api/v1/media/{media_id}/versions -->
                <div class="endpoint-section" id="createVersion">
                    <h2>POST /api/v1/media/{media_id}/versions - Create Media Version</h2>
                    <div class="form-group">
                        <label for="createVersion_media_id">Media ID:</label>
                        <input type="number" id="createVersion_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="createVersion_payload">Payload (VersionCreateRequest JSON):</label>
                        <textarea id="createVersion_payload">{
    "content": "Content for the new version.",
    "prompt": "Prompt used for this version.",
    "analysis_content": "Analysis content for this version."
}</textarea>
                    </div>
                    <button class="api-button" onclick="makeRequest('createVersion', 'POST', '/api/v1/media/{media_id}/versions', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="createVersion_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="createVersion_response">---</pre>
                </div>

                <!-- POST /api/v1/media/{media_id}/versions/advanced -->
                <div class="endpoint-section" id="createVersionAdvanced">
                    <h2>POST /api/v1/media/{media_id}/versions/advanced - Create/Update Version (Content + Metadata)</h2>
                    <div class="form-group">
                        <label for="createVersionAdvanced_media_id">Media ID:</label>
                        <input type="number" id="createVersionAdvanced_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="createVersionAdvanced_payload">Payload (AdvancedVersionUpsertRequest JSON):</label>
                        <textarea id="createVersionAdvanced_payload">{
    "content": "Optional new content (if new_version=true)",
    "prompt": "Optional new prompt",
    "analysis_content": "Optional new analysis",
    "safe_metadata": { "doi": "10.1234/example", "journal": "Nature" },
    "merge": true,
    "new_version": true
}</textarea>
                    </div>
                    <button class="api-button" onclick="makeRequest('createVersionAdvanced', 'POST', '/api/v1/media/{media_id}/versions/advanced', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="createVersionAdvanced_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="createVersionAdvanced_response">---</pre>
                </div>

                <!-- PATCH /api/v1/media/{media_id}/metadata -->
                <div class="endpoint-section" id="patchMetadataLatest">
                    <h2>PATCH /api/v1/media/{media_id}/metadata - Update Latest Version Metadata</h2>
                    <div class="form-group">
                        <label for="patchMetadataLatest_media_id">Media ID:</label>
                        <input type="number" id="patchMetadataLatest_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="patchMetadataLatest_payload">Payload (MetadataPatchRequest JSON):</label>
                        <textarea id="patchMetadataLatest_payload">{
    "safe_metadata": { "journal": "Nature", "license": "CC BY 4.0" },
    "merge": true,
    "new_version": false
}</textarea>
                    </div>
                    <button class="api-button" onclick="makeRequest('patchMetadataLatest', 'PATCH', '/api/v1/media/{media_id}/metadata', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="patchMetadataLatest_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="patchMetadataLatest_response">---</pre>
                </div>

                <!-- PUT /api/v1/media/{media_id}/versions/{version_number}/metadata -->
                <div class="endpoint-section" id="putVersionMetadata">
                    <h2>PUT /api/v1/media/{media_id}/versions/{version_number}/metadata - Update Specific Version Metadata</h2>
                    <div class="form-group">
                        <label for="putVersionMetadata_media_id">Media ID:</label>
                        <input type="number" id="putVersionMetadata_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="putVersionMetadata_version_number">Version Number:</label>
                        <input type="number" id="putVersionMetadata_version_number" value="1">
                    </div>
                    <div class="form-group">
                        <label for="putVersionMetadata_payload">Payload (MetadataPatchRequest JSON):</label>
                        <textarea id="putVersionMetadata_payload">{
    "safe_metadata": { "pmid": "123456" },
    "merge": true
}</textarea>
                    </div>
                    <button class="api-button" onclick="makeRequest('putVersionMetadata', 'PUT', '/api/v1/media/{media_id}/versions/{version_number}/metadata', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="putVersionMetadata_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="putVersionMetadata_response">---</pre>
                </div>

                <!-- GET /api/v1/media/{media_id}/versions -->
                <div class="endpoint-section" id="listVersions">
                    <h2>GET /api/v1/media/{media_id}/versions - List Media Versions</h2>
                    <div class="form-group">
                        <label for="listVersions_media_id">Media ID:</label>
                        <input type="number" id="listVersions_media_id" value="1">
                    </div>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="listVersions_include_content" name="include_content"> <label for="listVersions_include_content">Include Content</label>
                    </div>
                    <div class="form-group">
                        <label for="listVersions_limit">Limit:</label>
                        <input type="number" id="listVersions_limit" value="10" name="limit">
                    </div>
                    <div class="form-group">
                        <label for="listVersions_page">Page:</label>
                        <input type="number" id="listVersions_page" value="1" name="page">
                    </div>
                    <button class="api-button" onclick="makeRequest('listVersions', 'GET', '/api/v1/media/{media_id}/versions', 'query')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="listVersions_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="listVersions_response">---</pre>
                </div>

                <!-- GET /api/v1/media/{media_id}/versions/{version_number} -->
                <div class="endpoint-section" id="getVersion">
                    <h2>GET /api/v1/media/{media_id}/versions/{version_number} - Get Specific Media Version</h2>
                    <div class="form-group">
                        <label for="getVersion_media_id">Media ID:</label>
                        <input type="number" id="getVersion_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="getVersion_version_number">Version Number:</label>
                        <input type="number" id="getVersion_version_number" value="1">
                    </div>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="getVersion_include_content" name="include_content" checked> <label for="getVersion_include_content">Include Content</label>
                    </div>
                    <button class="api-button" onclick="makeRequest('getVersion', 'GET', '/api/v1/media/{media_id}/versions/{version_number}', 'query')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="getVersion_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="getVersion_response">---</pre>
                </div>

                <!-- DELETE /api/v1/media/{media_id}/versions/{version_number} -->
                <div class="endpoint-section" id="deleteVersion">
                    <h2>DELETE /api/v1/media/{media_id}/versions/{version_number} - Soft Delete Media Version</h2>
                    <div class="form-group">
                        <label for="deleteVersion_media_id">Media ID:</label>
                        <input type="number" id="deleteVersion_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="deleteVersion_version_number">Version Number:</label>
                        <input type="number" id="deleteVersion_version_number" value="1">
                    </div>
                    <button class="api-button" onclick="makeRequest('deleteVersion', 'DELETE', '/api/v1/media/{media_id}/versions/{version_number}', 'none')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="deleteVersion_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="deleteVersion_response">---</pre>
                </div>

                <!-- POST /api/v1/media/{media_id}/versions/rollback -->
                <div class="endpoint-section" id="rollbackVersion">
                    <h2>POST /api/v1/media/{media_id}/versions/rollback - Rollback to Media Version</h2>
                    <div class="form-group">
                        <label for="rollbackVersion_media_id">Media ID:</label>
                        <input type="number" id="rollbackVersion_media_id" value="1">
                    </div>
                    <div class="form-group">
                        <label for="rollbackVersion_payload">Payload (VersionRollbackRequest JSON):</label>
                        <textarea id="rollbackVersion_payload">{
    "version_number": 1
}</textarea>
                    </div>
                    <button class="api-button" onclick="makeRequest('rollbackVersion', 'POST', '/api/v1/media/{media_id}/versions/rollback', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="rollbackVersion_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="rollbackVersion_response">---</pre>
                </div>
            </div>

            <!-- Multi-Item Analysis Tab -->
            <div id="tabMultiItemAnalysis" class="tab-content">
                <div class="endpoint-section">
                    <h2>
                        <span class="endpoint-method get">ANALYZE</span>
                        <span class="endpoint-path">Multi-Item Review & Analysis</span>
                    </h2>
                    <div class="form-group" style="text-align:right; margin-top:-8px; margin-bottom:8px;">
                        <button class="btn btn-secondary" onclick="jumpToVectorStores()">Open Vector Stores</button>
                    </div>

                    <!-- Analysis Settings -->
                    <h3>Analysis Settings</h3>
                    <div class="columns">
                        <div class="column">
                            <div class="form-group">
                                <label for="multi_model">Model:</label>
                                <select id="multi_model" class="llm-model-select">
                                    <option value="">Use default</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="multi_temperature">Temperature:</label>
                                <input type="number" id="multi_temperature" value="0.7" step="0.1" min="0" max="2">
                            </div>
                        </div>
                        <div class="column">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id="multi_perform_analysis" checked>
                                    Perform Analysis
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="multi_system_prompt">System Prompt:</label>
                                <textarea id="multi_system_prompt" rows="3" placeholder="You are an expert analyst. Provide concise, structured insights."></textarea>
                            </div>
                            <div class="form-group">
                                <label for="multi_custom_prompt">Analysis Prompt:</label>
                                <textarea id="multi_custom_prompt" rows="3" placeholder="Summarize key points, takeaways, and action items."></textarea>
                            </div>
                        </div>
                        <div class="column">
                            <div class="form-group">
                                <label for="multi_store_option">Store Analysis:</label>
                                <select id="multi_store_option">
                                    <option value="none" selected>Do not store</option>
                                    <option value="media">Store on media (analysis field)</option>
                                    <option value="version">Store as new version</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id="multi_show_metadata" checked>
                                    Show Details/Metadata in results
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Sources: Search or URLs -->
                    <h3>Sources</h3>
                    <div class="columns">
                        <div class="column">
                            <h4>Search Existing Items</h4>
                            <div class="form-group">
                                <label for="multi_search_query">Query:</label>
                                <input type="text" id="multi_search_query" placeholder="keywords, title, content">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary" onclick="multiSearchItems()">Search</button>
                                <button class="btn" onclick="multiClearSearchResults()">Clear</button>
                            </div>
                            <pre id="multi_search_results">(No results)</pre>
                            <div class="form-group">
                                <button class="btn btn-success" onclick="multiAddSelectedFromSearch()">Add Selected to Queue</button>
                            </div>
                        </div>
                        <div class="column">
                            <h4>Submit URLs / Files to Process</h4>
                            <div class="form-group">
                                <label for="multi_processing_type">Processing Type:</label>
                                <select id="multi_processing_type">
                                    <option value="web" selected>Web Content</option>
                                    <option value="videos">Videos</option>
                                    <option value="audios">Audios</option>
                                    <option value="documents">Documents</option>
                                    <option value="pdfs">PDFs</option>
                                    <option value="ebooks">Ebooks</option>
                                </select>
                            </div>
                            <div class="form-group" id="group_multi_files">
                                <label for="multi_files">Upload Files (optional):</label>
                                <input type="file" id="multi_files" multiple>
                                <small id="multi_files_hint" class="field-hint">Accepted types depend on Processing Type.</small>
                            </div>
                            <div class="form-group">
                                <label for="multi_urls">URLs (one per line):</label>
                                <textarea id="multi_urls" rows="6" placeholder="https://youtu.be/...\nhttps://example.com/article"></textarea>
                            </div>
                            <div class="form-group" id="group_multi_scrape_method">
                                <label for="multi_scrape_method">Scrape Method:</label>
                                <select id="multi_scrape_method">
                                    <option value="Individual URLs" selected>Individual URLs</option>
                                    <option value="Sitemap">Sitemap</option>
                                    <option value="URL Level">URL Level</option>
                                    <option value="Recursive Scraping">Recursive Scraping</option>
                                </select>
                            </div>
                            <!-- Crawl strategy controls (Web content only) -->
                            <div class="form-group" id="group_multi_crawl_strategy">
                                <label for="multi_crawl_strategy">Crawl Strategy:</label>
                                <select id="multi_crawl_strategy">
                                    <option value="best_first" selected>best_first (default)</option>
                                    <option value="default">default (FIFO/BFS)</option>
                                </select>
                                <small>Applies to Recursive/URL Level scraping.</small>
                            </div>
                            <div class="form-group" id="group_multi_include_external">
                                <label>
                                    <input type="checkbox" id="multi_include_external"> Include external domains
                                </label>
                            </div>
                            <div class="form-group" id="group_multi_score_threshold">
                                <label for="multi_score_threshold">Score Threshold:</label>
                                <input type="number" id="multi_score_threshold" value="0" step="0.1" min="0">
                            </div>
                            <div class="form-group" id="group_multi_url_level">
                                <label for="multi_url_level">URL Level (for URL Level):</label>
                                <input type="number" id="multi_url_level" value="2" min="1">
                            </div>
                            <div class="form-group" id="group_multi_max_pages">
                                <label for="multi_max_pages">Max Pages (for recursive/sitemap):</label>
                                <input type="number" id="multi_max_pages" value="10" min="1">
                            </div>
                            <div class="form-group" id="group_multi_max_depth">
                                <label for="multi_max_depth">Max Depth (for recursive):</label>
                                <input type="number" id="multi_max_depth" value="3" min="1">
                            </div>
                            <div class="form-group">
                                <label for="multi_process_mode">Processing Mode:</label>
                                <select id="multi_process_mode">
                                    <option value="process_only" selected>Process only (no DB)</option>
                                    <option value="persist">Persist to DB</option>
                                </select>
                                <small>Process-only uses the process-web-scraping endpoint in ephemeral mode and does not store content.</small>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-success" onclick="multiIngestUrlsToQueue()">Process & Add to Queue</button>
                            </div>
                            <pre id="multi_ingest_status"></pre>
                        </div>
                    </div>

                    <!-- Advanced Options (per type) -->
                    <div class="collapsible">
                        <div class="collapsible-header" onclick="toggleMultiAdvancedOptions()" style="display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:12px;">
                            <h3 style="margin:0;">Advanced Options</h3>
                            <button class="btn btn-sm btn-secondary" id="multi_adv_toggle_btn">Show</button>
                        </div>
                        <div class="collapsible-body" id="multi_advanced_options" style="display:none;">
                            <div class="columns">
                        <div class="column" id="adv_videos" style="display:none;">
                            <h4>Video Options</h4>
                            <div class="info-box" style="margin-bottom:8px;">
                                <i class="icon-info"></i>
                                <span>
                                    Need transcription backends (Whisper/Parakeet/etc.)? Use the <a href="/setup" target="_blank">Setup Wizard</a>.
                                    Guide: <a href="/docs-static/Getting-Started-STT_and_TTS.md" target="_blank">Getting Started — STT/TTS</a>.
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="multi_vid_transcription_model">Transcription Model:</label>
                                <input type="text" id="multi_vid_transcription_model" value="deepdml/faster-distil-whisper-large-v3.5">
                            </div>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap;">
                                <label><input type="checkbox" id="multi_vid_diarize"> Diarize</label>
                                <label><input type="checkbox" id="multi_vid_vad_use"> VAD</label>
                                <label><input type="checkbox" id="multi_vid_timestamp_option" checked> Include Timestamps</label>
                                <label><input type="checkbox" id="multi_vid_confab_check"> Confabulation Check</label>
                            </div>
                            <div class="form-group" style="display:flex; gap:12px;">
                                <div style="flex:1;">
                                    <label for="multi_vid_start_time">Start Time:</label>
                                    <input type="text" id="multi_vid_start_time" placeholder="HH:MM:SS or seconds">
                                </div>
                                <div style="flex:1;">
                                    <label for="multi_vid_end_time">End Time:</label>
                                    <input type="text" id="multi_vid_end_time" placeholder="HH:MM:SS or seconds">
                                </div>
                            </div>
                            <h5>Chunking</h5>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap;">
                                <label><input type="checkbox" id="multi_vid_perform_chunking" checked> Perform Chunking</label>
                                <label><input type="checkbox" id="multi_vid_use_adaptive_chunking"> Adaptive</label>
                                <label><input type="checkbox" id="multi_vid_use_multi_level_chunking"> Multi-Level</label>
                                <label><input type="checkbox" id="multi_vid_summarize_recursively"> Summarize Recursively</label>
                            </div>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                                <label for="multi_vid_chunk_method">Method:</label>
                                <select id="multi_vid_chunk_method">
                                    <option value="words">words</option>
                                    <option value="sentences" selected>sentences</option>
                                    <option value="paragraphs">paragraphs</option>
                                    <option value="tokens">tokens</option>
                                    <option value="semantic">semantic</option>
                                </select>
                                <label for="multi_vid_chunk_size">Size:</label>
                                <input type="number" id="multi_vid_chunk_size" value="500" min="50" style="width:110px;">
                                <label for="multi_vid_chunk_overlap">Overlap:</label>
                                <input type="number" id="multi_vid_chunk_overlap" value="200" min="0" style="width:110px;">
                                <label for="multi_vid_chunk_language">Lang:</label>
                                <input type="text" id="multi_vid_chunk_language" placeholder="en" style="width:110px;">
                            </div>
                        </div>

                        <div class="column" id="adv_audios" style="display:none;">
                            <h4>Audio Options</h4>
                            <div class="info-box" style="margin-bottom:8px;">
                                <i class="icon-info"></i>
                                <span>
                                    Configure local STT (faster‑whisper/NeMo) via the <a href="/setup" target="_blank">Setup Wizard</a>.
                                    See: <a href="/docs-static/Getting-Started-STT_and_TTS.md" target="_blank">Getting Started — STT/TTS</a>.
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="multi_aud_transcription_model">Transcription Model:</label>
                                <input type="text" id="multi_aud_transcription_model" value="deepdml/faster-distil-whisper-large-v3.5">
                            </div>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap;">
                                <label><input type="checkbox" id="multi_aud_diarize"> Diarize</label>
                                <label><input type="checkbox" id="multi_aud_vad_use"> VAD</label>
                                <label><input type="checkbox" id="multi_aud_timestamp_option" checked> Include Timestamps</label>
                            </div>
                            <h5>Chunking</h5>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                                <label><input type="checkbox" id="multi_aud_perform_chunking" checked> Perform Chunking</label>
                                <label><input type="checkbox" id="multi_aud_use_adaptive_chunking"> Adaptive</label>
                                <label><input type="checkbox" id="multi_aud_use_multi_level_chunking"> Multi-Level</label>
                                <label><input type="checkbox" id="multi_aud_summarize_recursively"> Summarize Recursively</label>
                            </div>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                                <label for="multi_aud_chunk_method">Method:</label>
                                <select id="multi_aud_chunk_method">
                                    <option value="words">words</option>
                                    <option value="sentences" selected>sentences</option>
                                    <option value="paragraphs">paragraphs</option>
                                    <option value="tokens">tokens</option>
                                    <option value="semantic">semantic</option>
                                </select>
                                <label for="multi_aud_chunk_size">Size:</label>
                                <input type="number" id="multi_aud_chunk_size" value="500" min="50" style="width:110px;">
                                <label for="multi_aud_chunk_overlap">Overlap:</label>
                                <input type="number" id="multi_aud_chunk_overlap" value="200" min="0" style="width:110px;">
                                <label for="multi_aud_chunk_language">Lang:</label>
                                <input type="text" id="multi_aud_chunk_language" placeholder="en" style="width:110px;">
                            </div>
                        </div>

                        <div class="column" id="adv_documents" style="display:none;">
                            <h4>Document Options</h4>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap;">
                                <label><input type="checkbox" id="multi_doc_use_cookies"> Use Cookies</label>
                                <input type="text" id="multi_doc_cookies" placeholder="cookie string" style="flex:1;">
                            </div>
                            <h5>Chunking</h5>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                                <label><input type="checkbox" id="multi_doc_perform_chunking" checked> Perform Chunking</label>
                                <label for="multi_doc_chunk_method">Method:</label>
                                <select id="multi_doc_chunk_method">
                                    <option value="words">words</option>
                                    <option value="sentences" selected>sentences</option>
                                    <option value="paragraphs">paragraphs</option>
                                    <option value="tokens">tokens</option>
                                    <option value="semantic">semantic</option>
                                </select>
                                <label for="multi_doc_chunk_size">Size:</label>
                                <input type="number" id="multi_doc_chunk_size" value="1000" min="50" style="width:110px;">
                                <label for="multi_doc_chunk_overlap">Overlap:</label>
                                <input type="number" id="multi_doc_chunk_overlap" value="200" min="0" style="width:110px;">
                                <label for="multi_doc_chunk_language">Lang:</label>
                                <input type="text" id="multi_doc_chunk_language" placeholder="en" style="width:110px;">
                                <label for="multi_doc_custom_chapter_pattern">Chapter Regex:</label>
                                <input type="text" id="multi_doc_custom_chapter_pattern" placeholder="^(Chapter|Section) \\d+" style="flex:1;">
                            </div>
                        </div>

                        <div class="column" id="adv_pdfs" style="display:none;">
                            <h4>PDF Options</h4>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap;">
                                <label for="multi_pdf_parsing_engine">Parsing Engine:</label>
                                <input type="text" id="multi_pdf_parsing_engine" value="pymupdf4llm" style="width:200px;">
                                <label for="multi_pdf_custom_chapter_pattern">Chapter Regex:</label>
                                <input type="text" id="multi_pdf_custom_chapter_pattern" placeholder="e.g., ^(Chapter|Section) \\d+" style="flex:1;">
                                <label><input type="checkbox" id="multi_pdf_use_cookies"> Use Cookies</label>
                                <input type="text" id="multi_pdf_cookies" placeholder="cookie string" style="flex:1;">
                            </div>
                            <h5>Chunking</h5>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                                <label><input type="checkbox" id="multi_pdf_perform_chunking" checked> Perform Chunking</label>
                                <label for="multi_pdf_chunk_method">Method:</label>
                                <select id="multi_pdf_chunk_method">
                                    <option value="words">words</option>
                                    <option value="sentences" selected>sentences</option>
                                    <option value="paragraphs">paragraphs</option>
                                    <option value="tokens">tokens</option>
                                    <option value="semantic">semantic</option>
                                </select>
                                <label for="multi_pdf_chunk_size">Size:</label>
                                <input type="number" id="multi_pdf_chunk_size" value="500" min="50" style="width:110px;">
                                <label for="multi_pdf_chunk_overlap">Overlap:</label>
                                <input type="number" id="multi_pdf_chunk_overlap" value="200" min="0" style="width:110px;">
                                <label for="multi_pdf_chunk_language">Lang:</label>
                                <input type="text" id="multi_pdf_chunk_language" placeholder="en" style="width:110px;">
                            </div>
                        </div>

                        <div class="column" id="adv_ebooks" style="display:none;">
                            <h4>Ebook Options</h4>
                            <div class="form-group" style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                                <label><input type="checkbox" id="multi_ebook_perform_chunking" checked> Perform Chunking</label>
                                <label for="multi_ebook_chunk_method">Method:</label>
                                <select id="multi_ebook_chunk_method">
                                    <option value="words">words</option>
                                    <option value="sentences" selected>sentences</option>
                                    <option value="paragraphs">paragraphs</option>
                                    <option value="tokens">tokens</option>
                                    <option value="semantic">semantic</option>
                                </select>
                                <label for="multi_ebook_chunk_size">Size:</label>
                                <input type="number" id="multi_ebook_chunk_size" value="500" min="50" style="width:110px;">
                                <label for="multi_ebook_chunk_overlap">Overlap:</label>
                                <input type="number" id="multi_ebook_chunk_overlap" value="200" min="0" style="width:110px;">
                                <label for="multi_ebook_custom_chapter_pattern">Chapter Regex:</label>
                                <input type="text" id="multi_ebook_custom_chapter_pattern" placeholder="^(Chapter|Section) \\d+" style="flex:1;">
                            </div>
                        </div>
                            </div>
                        </div>
                    </div>

                    <!-- Queue & Results -->
                    <h3>Queue</h3>
                    <div class="form-group">
                        <button class="btn btn-primary" onclick="multiAnalyzeAll()">Analyze All</button>
                        <button class="btn" onclick="multiClearQueue()">Clear Queue</button>
                    </div>
                    <div id="multi_progress" style="display:none; margin:8px 0;">
                        <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
                            <span id="multi_progress_text">Processing...</span>
                            <span id="multi_progress_count"></span>
                        </div>
                        <div class="progress-container" style="width:100%; background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius:6px; overflow:hidden; height:12px;">
                            <div id="multi_progress_bar" class="progress-bar" style="height:100%; width:0%; background: var(--color-primary);"></div>
                        </div>
                    </div>
                    <div id="multi_queue_container"></div>
                </div>
            </div>

            <!-- Media Ingestion (DB Persistence) Tab -->
            <div id="tabMediaIngestionPersistence" class="tab-content">
                <div class="endpoint-section" id="addMedia">
                    <h2>POST /api/v1/media/add - Add Media (URLs/Files) with DB Persistence</h2>
                    <p>This endpoint ingests media, processes it, and saves it to the database.</p>
                    <div class="columns">
                        <div class="column">
                            <h3>Basic Info & Sources</h3>
                            <div class="form-group">
                                <label for="addMedia_media_type">Media Type:</label>
                                <select id="addMedia_media_type" name="media_type">
                                    <option value="video">Video</option>
                                    <option value="audio">Audio</option>
                                    <option value="document">Document (includes .txt, .md, .html, .xml, .docx, .rtf)</option>
                                    <option value="pdf">PDF</option>
                                    <option value="ebook">eBook</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="addMedia_urls">URLs (one per line):</label>
                                <textarea id="addMedia_urls" name="urls" placeholder="https://example.com/video.mp4"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="addMedia_files">Files:</label>
                                <input type="file" id="addMedia_files" name="files" multiple>
                            </div>
                             <div class="form-group">
                                <label for="addMedia_title">Title (optional, for single item):</label>
                                <input type="text" id="addMedia_title" name="title">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_author">Author (optional, for single item):</label>
                                <input type="text" id="addMedia_author" name="author">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_keywords">Keywords (comma-separated):</label>
                                <input type="text" id="addMedia_keywords" name="keywords">
                            </div>
                        </div>
                        <div class="column">
                            <h3>Processing Options</h3>
                             <div class="form-group checkbox-group" style="display: flex; flex-direction: column; gap: 8px;">
                                <div><input type="checkbox" id="addMedia_overwrite_existing" name="overwrite_existing"> <label for="addMedia_overwrite_existing">Overwrite Existing</label></div>
                                <div><input type="checkbox" id="addMedia_keep_original_file" name="keep_original_file"> <label for="addMedia_keep_original_file">Keep Original File</label></div>
                                <div><input type="checkbox" id="addMedia_perform_analysis" name="perform_analysis"> <label for="addMedia_perform_analysis">Perform Analysis</label></div>
                                <div><input type="checkbox" id="addMedia_use_cookies" name="use_cookies"> <label for="addMedia_use_cookies">Use Cookies (for URL download)</label></div>
                                <div><input type="checkbox" id="addMedia_diarize" name="diarize"> <label for="addMedia_diarize">Diarize (Audio/Video)</label></div>
                                <div><input type="checkbox" id="addMedia_timestamp_option" name="timestamp_option" checked> <label for="addMedia_timestamp_option">Timestamp Option (Audio/Video)</label></div>
                                <div><input type="checkbox" id="addMedia_vad_use" name="vad_use"> <label for="addMedia_vad_use">VAD Use (Audio/Video)</label></div>
                                <div><input type="checkbox" id="addMedia_perform_confabulation_check_of_analysis" name="perform_confabulation_check_of_analysis"> <label for="addMedia_perform_confabulation_check_of_analysis">Confabulation Check</label></div>
                                <div><input type="checkbox" id="addMedia_perform_chunking" name="perform_chunking" checked> <label for="addMedia_perform_chunking">Perform Chunking</label></div>
                                <div><input type="checkbox" id="addMedia_use_adaptive_chunking" name="use_adaptive_chunking"> <label for="addMedia_use_adaptive_chunking">Use Adaptive Chunking</label></div>
                                <div><input type="checkbox" id="addMedia_use_multi_level_chunking" name="use_multi_level_chunking"> <label for="addMedia_use_multi_level_chunking">Use Multi-Level Chunking</label></div>
                                <div><input type="checkbox" id="addMedia_perform_rolling_summarization" name="perform_rolling_summarization"> <label for="addMedia_perform_rolling_summarization">Perform Rolling Summarization</label></div>
                                <div><input type="checkbox" id="addMedia_summarize_recursively" name="summarize_recursively"> <label for="addMedia_summarize_recursively">Summarize Recursively</label></div>
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                         <div class="column">
                            <h3>Prompts & API</h3>
                            <div class="form-group">
                                <label for="addMedia_custom_prompt">Custom Prompt:</label>
                                <textarea id="addMedia_custom_prompt" name="custom_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="addMedia_system_prompt">System Prompt:</label>
                                <textarea id="addMedia_system_prompt" name="system_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="addMedia_model">Model for Analysis:</label>
                                <select id="addMedia_model" class="llm-model-select" name="api_name">
                                    <option value="">Loading models...</option>
                                </select>
                            </div>
                            <!-- api_key input removed - SECURITY: API keys are retrieved from server config -->
                            <div class="form-group">
                                <label for="addMedia_cookies">Cookies (string, if use_cookies):</label>
                                <input type="text" id="addMedia_cookies" name="cookies">
                            </div>
                        </div>
                        <div class="column">
                            <h3>Specific Media Settings</h3>
                             <div class="form-group">
                                <label for="addMedia_transcription_model">Transcription Model (Audio/Video):</label>
                                <select id="addMedia_transcription_model" name="transcription_model" class="form-control">
                                    <optgroup label="Whisper Models">
                                        <option value="whisper-tiny">Whisper Tiny (39M)</option>
                                        <option value="whisper-tiny.en">Whisper Tiny English (39M)</option>
                                        <option value="whisper-base">Whisper Base (74M)</option>
                                        <option value="whisper-base.en">Whisper Base English (74M)</option>
                                        <option value="whisper-small">Whisper Small (244M)</option>
                                        <option value="whisper-small.en">Whisper Small English (244M)</option>
                                        <option value="whisper-medium">Whisper Medium (769M)</option>
                                        <option value="whisper-medium.en">Whisper Medium English (769M)</option>
                                        <option value="whisper-large-v1">Whisper Large v1 (1550M)</option>
                                        <option value="whisper-large-v2">Whisper Large v2 (1550M)</option>
                                        <option value="whisper-large-v3">Whisper Large v3 (1550M)</option>
                                        <option value="whisper-large-v3-turbo">Whisper Large v3 Turbo (809M)</option>
                                    </optgroup>
                                    <optgroup label="Distil-Whisper Models (Faster)">
                                        <option value="distil-whisper-large-v2">Distil-Whisper Large v2</option>
                                        <option value="distil-whisper-large-v3">Distil-Whisper Large v3</option>
                                        <option value="distil-whisper-medium.en">Distil-Whisper Medium English</option>
                                        <option value="distil-whisper-small.en">Distil-Whisper Small English</option>
                                    </optgroup>
                                    <optgroup label="Optimized Models">
                                        <option value="deepdml/faster-distil-whisper-large-v3.5" selected>Faster Distil-Whisper Large v3.5 (Recommended)</option>
                                        <option value="deepdml/faster-whisper-large-v3-turbo-ct2">Faster Whisper Large v3 Turbo CT2</option>
                                    </optgroup>
                                    <optgroup label="Nemo Models">
                                        <option value="nemo-canary-1b">Nemo Canary 1B (Multilingual)</option>
                                        <option value="nemo-parakeet-tdt-1.1b">Nemo Parakeet TDT 1.1B</option>
                                    </optgroup>
                                    <optgroup label="Parakeet Backends">
                                        <option value="parakeet-standard">Parakeet Standard</option>
                                        <option value="parakeet-cuda">Parakeet CUDA (GPU)</option>
                                        <option value="parakeet-mlx">Parakeet MLX (Apple Silicon)</option>
                                        <option value="parakeet-onnx">Parakeet ONNX (Cross-platform)</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="addMedia_transcription_language">Transcription Language (Audio/Video):</label>
                                <input type="text" id="addMedia_transcription_language" name="transcription_language" value="en">
                            </div>
                             <div class="form-group">
                                <label for="addMedia_start_time">Start Time (HH:MM:SS or secs, A/V):</label>
                                <input type="text" id="addMedia_start_time" name="start_time">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_end_time">End Time (HH:MM:SS or secs, A/V):</label>
                                <input type="text" id="addMedia_end_time" name="end_time">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_pdf_parsing_engine">PDF Parsing Engine:</label>
                                <select id="addMedia_pdf_parsing_engine" name="pdf_parsing_engine">
                                    <option value="pymupdf4llm">pymupdf4llm</option>
                                    <option value="pymupdf">pymupdf</option>
                                    <option value="docling">docling</option>
                                    <option value="ocr_only">ocr_only</option>
                                </select>
                            </div>
                        </div>
                    </div>
                     <div class="columns">
                        <div class="column">
                            <h3>Chunking Details</h3>
                             <div class="form-group">
                                <label for="addMedia_chunk_method">Chunk Method:</label>
                                <select id="addMedia_chunk_method" name="chunk_method">
                                    <option value="" selected>(default based on media type)</option>
                                    <option value="semantic">semantic</option>
                                    <option value="token">token</option>
                                    <option value="paragraph">paragraph</option>
                                    <option value="sentence">sentence</option>
                                    <option value="word">word</option>
                                    <option value="recursive">recursive (text)</option>
                                    <option value="markdown">markdown</option>
                                    <option value="text_splitter">text_splitter</option>
                                    <option value="code_splitter">code_splitter</option>
                                    <option value="json_splitter">json_splitter</option>
                                    <option value="html_splitter">html_splitter</option>
                                    <option value="page">page (PDF)</option>
                                    <option value="layout">layout (PDF)</option>
                                    <option value="reference">reference</option>
                                    <option value="ebook_chapters">ebook_chapters</option>
                                    <option value="propositions">propositions</option>
                                </select>
                            </div>
                             <div class="form-group">
                                <label for="addMedia_chunk_language">Chunk Language Override:</label>
                                <input type="text" id="addMedia_chunk_language" name="chunk_language">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_chunk_size">Chunk Size:</label>
                                <input type="number" id="addMedia_chunk_size" name="chunk_size" value="500">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_chunk_overlap">Chunk Overlap:</label>
                                <input type="number" id="addMedia_chunk_overlap" name="chunk_overlap" value="200">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_custom_chapter_pattern">Custom Chapter Pattern (Regex):</label>
                                <input type="text" id="addMedia_custom_chapter_pattern" name="custom_chapter_pattern">
                            </div>
                            <h3>Contextual Chunking</h3>
                            <div class="form-group checkbox-group" style="display:flex; gap:12px; align-items:center;">
                                <input type="checkbox" id="addMedia_enable_contextual_chunking" name="enable_contextual_chunking">
                                <label for="addMedia_enable_contextual_chunking">Enable Contextual Chunking</label>
                            </div>
                            <div class="form-group">
                                <label for="addMedia_contextual_llm_model">Contextual LLM Model:</label>
                                <input type="text" id="addMedia_contextual_llm_model" name="contextual_llm_model" placeholder="e.g., gpt-3.5-turbo">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_context_window_size">Context Window Size (chars):</label>
                                <input type="number" id="addMedia_context_window_size" name="context_window_size" placeholder="e.g., 1200">
                            </div>
                            <div class="form-group">
                                <label for="addMedia_context_strategy">Context Strategy:</label>
                                <select id="addMedia_context_strategy" name="context_strategy">
                                    <option value="">(default: auto)</option>
                                    <option value="auto">auto</option>
                                    <option value="full">full</option>
                                    <option value="window">window</option>
                                    <option value="outline_window">outline_window</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="addMedia_context_token_budget">Context Token Budget (auto):</label>
                                <input type="number" id="addMedia_context_token_budget" name="context_token_budget" placeholder="e.g., 6000">
                            </div>
                        </div>
                    </div>
                    <button class="api-button" onclick="makeRequest('addMedia', 'POST', '/api/v1/media/add', 'form')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="addMedia_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="addMedia_response">---</pre>
                </div>
            </div>

            <!-- Media Processing (No DB) Tab -->
            <div id="tabMediaProcessingNoDB" class="tab-content">
                <div class="info-box" style="margin-bottom:12px;">
                    <i class="icon-info"></i>
                    <span>
                        Documentation:
                        <a href="/docs-static/Code_Documentation/Ingestion_Media_Processing.md" target="_blank">Overview</a> ·
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Video.md" target="_blank">Video</a> ·
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Audio.md" target="_blank">Audio</a> ·
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_PDF.md" target="_blank">PDF</a> ·
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Ebooks.md" target="_blank">EPUB</a> ·
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Documents.md" target="_blank">Documents</a> ·
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_MediaWiki.md" target="_blank">MediaWiki</a>
                    </span>
                </div>
                <!-- POST /api/v1/media/process-videos -->
                <div class="endpoint-section" id="processVideos">
                    <h2>POST /api/v1/media/process-videos - Process Videos (No DB)</h2>
                    <p>Media type is fixed to "video", keep_original_file is false. Inherits many options from AddMediaForm.
                       <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Video.md" target="_blank">Docs</a>
                    </p>
                    <div class="columns">
                        <div class="column">
                            <h3>Sources & Info</h3>
                            <div class="form-group">
                                <label for="processVideos_urls">URLs (one per line):</label>
                                <textarea id="processVideos_urls" name="urls" placeholder="https://example.com/video.mp4"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processVideos_files">Files:</label>
                                <input type="file" id="processVideos_files" name="files" multiple>
                            </div>
                             <div class="form-group">
                                <label for="processVideos_title">Title (optional):</label>
                                <input type="text" id="processVideos_title" name="title">
                            </div>
                            <div class="form-group">
                                <label for="processVideos_author">Author (optional):</label>
                                <input type="text" id="processVideos_author" name="author">
                            </div>
                            <div class="form-group">
                                <label for="processVideos_keywords">Keywords (comma-separated):</label>
                                <input type="text" id="processVideos_keywords" name="keywords">
                            </div>
                        </div>
                        <div class="column">
                            <h3>Processing Options</h3>
                             <div class="form-group checkbox-group">
                                <div><input type="checkbox" id="processVideos_perform_analysis" name="perform_analysis" checked> <label for="processVideos_perform_analysis">Perform Analysis</label></div>
                                <div><input type="checkbox" id="processVideos_use_cookies" name="use_cookies"> <label for="processVideos_use_cookies">Use Cookies</label></div>
                                <div><input type="checkbox" id="processVideos_diarize" name="diarize"> <label for="processVideos_diarize">Diarize</label></div>
                                <div><input type="checkbox" id="processVideos_timestamp_option" name="timestamp_option" checked> <label for="processVideos_timestamp_option">Timestamp Option</label></div>
                                <div><input type="checkbox" id="processVideos_vad_use" name="vad_use"> <label for="processVideos_vad_use">VAD Use</label></div>
                                <div><input type="checkbox" id="processVideos_perform_confabulation_check_of_analysis" name="perform_confabulation_check_of_analysis"> <label for="processVideos_perform_confabulation_check_of_analysis">Confabulation Check</label></div>
                                <div><input type="checkbox" id="processVideos_perform_chunking" name="perform_chunking" checked> <label for="processVideos_perform_chunking">Perform Chunking</label></div>
                                <div><input type="checkbox" id="processVideos_use_adaptive_chunking" name="use_adaptive_chunking"> <label for="processVideos_use_adaptive_chunking">Adaptive Chunking</label></div>
                                <div><input type="checkbox" id="processVideos_use_multi_level_chunking" name="use_multi_level_chunking"> <label for="processVideos_use_multi_level_chunking">Multi-Level Chunking</label></div>
                                <div><input type="checkbox" id="processVideos_summarize_recursively" name="summarize_recursively"> <label for="processVideos_summarize_recursively">Summarize Recursively</label></div>
                                <!-- Overwrite existing is not used by this endpoint per Python, but Pydantic model needs it -->
                                <input type="hidden" id="processVideos_overwrite_existing" name="overwrite_existing" value="false">
                            </div>
                        </div>
                    </div>
                     <div class="columns">
                         <div class="column">
                            <h3>Prompts & API</h3>
                            <div class="form-group">
                                <label for="processVideos_custom_prompt">Custom Prompt:</label>
                                <textarea id="processVideos_custom_prompt" name="custom_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processVideos_system_prompt">System Prompt:</label>
                                <textarea id="processVideos_system_prompt" name="system_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processVideos_model">Model for Analysis:</label>
                                <select id="processVideos_model" class="llm-model-select" name="api_name">
                                    <option value="">Loading models...</option>
                                </select>
                            </div>
                            <!-- api_key input removed - SECURITY: API keys are retrieved from server config -->
                            <div class="form-group">
                                <label for="processVideos_cookies">Cookies (string, if use_cookies):</label>
                                <input type="text" id="processVideos_cookies" name="cookies">
                            </div>
                        </div>
                        <div class="column">
                            <h3>Video Specific Settings</h3>
                            <div class="info-box" style="margin-bottom:8px;">
                                <i class="icon-info"></i>
                                <span>
                                    New to STT? Open the <a href="/setup" target="_blank">Setup Wizard</a> to enable Whisper/Parakeet and verify FFmpeg.
                                    Quick guide: <a href="/docs-static/Getting-Started-STT_and_TTS.md" target="_blank">Getting Started — STT/TTS</a>.
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="processVideos_transcription_model">Transcription Model:</label>
                                <select id="processVideos_transcription_model" name="transcription_model" class="form-control">
                                    <optgroup label="Whisper Models">
                                        <option value="whisper-tiny">Whisper Tiny (39M)</option>
                                        <option value="whisper-tiny.en">Whisper Tiny English (39M)</option>
                                        <option value="whisper-base">Whisper Base (74M)</option>
                                        <option value="whisper-base.en">Whisper Base English (74M)</option>
                                        <option value="whisper-small">Whisper Small (244M)</option>
                                        <option value="whisper-small.en">Whisper Small English (244M)</option>
                                        <option value="whisper-medium">Whisper Medium (769M)</option>
                                        <option value="whisper-medium.en">Whisper Medium English (769M)</option>
                                        <option value="whisper-large-v1">Whisper Large v1 (1550M)</option>
                                        <option value="whisper-large-v2">Whisper Large v2 (1550M)</option>
                                        <option value="whisper-large-v3">Whisper Large v3 (1550M)</option>
                                        <option value="whisper-large-v3-turbo">Whisper Large v3 Turbo (809M)</option>
                                    </optgroup>
                                    <optgroup label="Distil-Whisper Models (Faster)">
                                        <option value="distil-whisper-large-v2">Distil-Whisper Large v2</option>
                                        <option value="distil-whisper-large-v3">Distil-Whisper Large v3</option>
                                        <option value="distil-whisper-medium.en">Distil-Whisper Medium English</option>
                                        <option value="distil-whisper-small.en">Distil-Whisper Small English</option>
                                    </optgroup>
                                    <optgroup label="Optimized Models">
                                        <option value="deepdml/faster-distil-whisper-large-v3.5">Faster Distil-Whisper Large v3.5</option>
                                        <option value="deepdml/faster-whisper-large-v3-turbo-ct2" selected>Faster Whisper Large v3 Turbo CT2 (Recommended)</option>
                                    </optgroup>
                                    <optgroup label="Nemo Models">
                                        <option value="nemo-canary-1b">Nemo Canary 1B (Multilingual)</option>
                                        <option value="nemo-parakeet-tdt-1.1b">Nemo Parakeet TDT 1.1B</option>
                                    </optgroup>
                                    <optgroup label="Parakeet Backends">
                                        <option value="parakeet-standard">Parakeet Standard</option>
                                        <option value="parakeet-cuda">Parakeet CUDA (GPU)</option>
                                        <option value="parakeet-mlx">Parakeet MLX (Apple Silicon)</option>
                                        <option value="parakeet-onnx">Parakeet ONNX (Cross-platform)</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processVideos_transcription_language">Transcription Language:</label>
                                <input type="text" id="processVideos_transcription_language" name="transcription_language" value="en">
                            </div>
                             <div class="form-group">
                                <label for="processVideos_start_time">Start Time (HH:MM:SS or secs):</label>
                                <input type="text" id="processVideos_start_time" name="start_time">
                            </div>
                            <div class="form-group">
                                <label for="processVideos_end_time">End Time (HH:MM:SS or secs):</label>
                                <input type="text" id="processVideos_end_time" name="end_time">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                        <div class="column">
                            <h3>Chunking Details</h3>
                             <div class="form-group">
                                <label for="processVideos_chunk_method">Chunk Method:</label>
                                <select id="processVideos_chunk_method" name="chunk_method">
                                    <option value="sentences" selected>sentences</option>
                                    <option value="recursive">recursive</option>
                                    <option value="token">token</option>
                                    <option value="character">character</option>
                                     <!-- Add other ChunkMethod enums -->
                                </select>
                            </div>
                             <div class="form-group">
                                <label for="processVideos_chunk_language">Chunk Language Override:</label>
                                <input type="text" id="processVideos_chunk_language" name="chunk_language">
                            </div>
                            <div class="form-group">
                                <label for="processVideos_chunk_size">Chunk Size:</label>
                                <input type="number" id="processVideos_chunk_size" name="chunk_size" value="500">
                            </div>
                            <div class="form-group">
                                <label for="processVideos_chunk_overlap">Chunk Overlap:</label>
                                <input type="number" id="processVideos_chunk_overlap" name="chunk_overlap" value="200">
                            </div>
                             <div class="form-group">
                                <label for="processVideos_custom_chapter_pattern">Custom Chapter Pattern (Regex):</label>
                                <input type="text" id="processVideos_custom_chapter_pattern" name="custom_chapter_pattern">
                            </div>
                        </div>
                    </div>
                    <button class="api-button" onclick="makeRequest('processVideos', 'POST', '/api/v1/media/process-videos', 'form')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="processVideos_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="processVideos_response">---</pre>
                </div>

                <!-- POST /api/v1/media/process-audios -->
                <div class="endpoint-section" id="processAudios">
                    <h2>POST /api/v1/media/process-audios - Process Audios (No DB)</h2>
                    <p>Media type is fixed to "audio", keep_original_file is false.
                       <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Audio.md" target="_blank">Docs</a>
                    </p>
                     <div class="columns">
                        <div class="column">
                            <h3>Sources & Info</h3>
                            <div class="form-group">
                                <label for="processAudios_urls">URLs (one per line):</label>
                                <textarea id="processAudios_urls" name="urls" placeholder="https://example.com/audio.mp3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processAudios_files">Files:</label>
                                <input type="file" id="processAudios_files" name="files" multiple>
                            </div>
                             <div class="form-group">
                                <label for="processAudios_title">Title (optional):</label>
                                <input type="text" id="processAudios_title" name="title">
                            </div>
                            <div class="form-group">
                                <label for="processAudios_author">Author (optional):</label>
                                <input type="text" id="processAudios_author" name="author">
                            </div>
                            <div class="form-group">
                                <label for="processAudios_keywords">Keywords (comma-separated):</label>
                                <input type="text" id="processAudios_keywords" name="keywords">
                            </div>
                        </div>
                        <div class="column">
                            <h3>Processing Options</h3>
                             <div class="form-group checkbox-group">
                                <div><input type="checkbox" id="processAudios_perform_analysis" name="perform_analysis" checked> <label for="processAudios_perform_analysis">Perform Analysis</label></div>
                                <div><input type="checkbox" id="processAudios_use_cookies" name="use_cookies"> <label for="processAudios_use_cookies">Use Cookies</label></div>
                                <div><input type="checkbox" id="processAudios_diarize" name="diarize"> <label for="processAudios_diarize">Diarize</label></div>
                                <div><input type="checkbox" id="processAudios_timestamp_option" name="timestamp_option" checked> <label for="processAudios_timestamp_option">Timestamp Option</label></div>
                                <div><input type="checkbox" id="processAudios_vad_use" name="vad_use"> <label for="processAudios_vad_use">VAD Use</label></div>
                                <div><input type="checkbox" id="processAudios_perform_confabulation_check_of_analysis" name="perform_confabulation_check_of_analysis"> <label for="processAudios_perform_confabulation_check_of_analysis">Confabulation Check</label></div>
                                <div><input type="checkbox" id="processAudios_perform_chunking" name="perform_chunking" checked> <label for="processAudios_perform_chunking">Perform Chunking</label></div>
                                <div><input type="checkbox" id="processAudios_use_adaptive_chunking" name="use_adaptive_chunking"> <label for="processAudios_use_adaptive_chunking">Adaptive Chunking</label></div>
                                <div><input type="checkbox" id="processAudios_use_multi_level_chunking" name="use_multi_level_chunking"> <label for="processAudios_use_multi_level_chunking">Multi-Level Chunking</label></div>
                                <div><input type="checkbox" id="processAudios_summarize_recursively" name="summarize_recursively"> <label for="processAudios_summarize_recursively">Summarize Recursively</label></div>
                                <input type="hidden" id="processAudios_overwrite_existing" name="overwrite_existing" value="false">
                            </div>
                        </div>
                    </div>
                     <div class="columns">
                         <div class="column">
                            <h3>Prompts & API</h3>
                            <div class="form-group">
                                <label for="processAudios_custom_prompt">Custom Prompt:</label>
                                <textarea id="processAudios_custom_prompt" name="custom_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processAudios_system_prompt">System Prompt:</label>
                                <textarea id="processAudios_system_prompt" name="system_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processAudios_model">Model for Analysis:</label>
                                <select id="processAudios_model" class="llm-model-select" name="api_name">
                                    <option value="">Loading models...</option>
                                </select>
                            </div>
                            <!-- api_key input removed - SECURITY: API keys are retrieved from server config -->
                            <div class="form-group">
                                <label for="processAudios_cookies">Cookies (string, if use_cookies):</label>
                                <input type="text" id="processAudios_cookies" name="cookies">
                            </div>
                        </div>
                        <div class="column">
                            <h3>Audio Specific Settings</h3>
                            <div class="info-box" style="margin-bottom:8px;">
                                <i class="icon-info"></i>
                                <span>
                                    Configure STT backends via the <a href="/setup" target="_blank">Setup Wizard</a> (faster‑whisper, NeMo, Qwen2Audio).
                                    See: <a href="/docs-static/Getting-Started-STT_and_TTS.md" target="_blank">Getting Started — STT/TTS</a>.
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="processAudios_transcription_model">Transcription Model:</label>
                                <select id="processAudios_transcription_model" name="transcription_model" class="form-control">
                                    <optgroup label="Whisper Models">
                                        <option value="whisper-tiny">Whisper Tiny (39M)</option>
                                        <option value="whisper-tiny.en">Whisper Tiny English (39M)</option>
                                        <option value="whisper-base">Whisper Base (74M)</option>
                                        <option value="whisper-base.en">Whisper Base English (74M)</option>
                                        <option value="whisper-small">Whisper Small (244M)</option>
                                        <option value="whisper-small.en">Whisper Small English (244M)</option>
                                        <option value="whisper-medium">Whisper Medium (769M)</option>
                                        <option value="whisper-medium.en">Whisper Medium English (769M)</option>
                                        <option value="whisper-large-v1">Whisper Large v1 (1550M)</option>
                                        <option value="whisper-large-v2">Whisper Large v2 (1550M)</option>
                                        <option value="whisper-large-v3">Whisper Large v3 (1550M)</option>
                                        <option value="whisper-large-v3-turbo">Whisper Large v3 Turbo (809M)</option>
                                    </optgroup>
                                    <optgroup label="Distil-Whisper Models (Faster)">
                                        <option value="distil-whisper-large-v2">Distil-Whisper Large v2</option>
                                        <option value="distil-whisper-large-v3">Distil-Whisper Large v3</option>
                                        <option value="distil-whisper-medium.en">Distil-Whisper Medium English</option>
                                        <option value="distil-whisper-small.en">Distil-Whisper Small English</option>
                                    </optgroup>
                                    <optgroup label="Optimized Models">
                                        <option value="deepdml/faster-distil-whisper-large-v3.5" selected>Faster Distil-Whisper Large v3.5 (Recommended)</option>
                                        <option value="deepdml/faster-whisper-large-v3-turbo-ct2">Faster Whisper Large v3 Turbo CT2</option>
                                    </optgroup>
                                    <optgroup label="Nemo Models">
                                        <option value="nemo-canary-1b">Nemo Canary 1B (Multilingual)</option>
                                        <option value="nemo-parakeet-tdt-1.1b">Nemo Parakeet TDT 1.1B</option>
                                    </optgroup>
                                    <optgroup label="Parakeet Backends">
                                        <option value="parakeet-standard">Parakeet Standard</option>
                                        <option value="parakeet-cuda">Parakeet CUDA (GPU)</option>
                                        <option value="parakeet-mlx">Parakeet MLX (Apple Silicon)</option>
                                        <option value="parakeet-onnx">Parakeet ONNX (Cross-platform)</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processAudios_transcription_language">Transcription Language:</label>
                                <input type="text" id="processAudios_transcription_language" name="transcription_language" value="en">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                        <div class="column">
                            <h3>Chunking Details</h3>
                             <div class="form-group">
                                <label for="processAudios_chunk_method">Chunk Method:</label>
                                <select id="processAudios_chunk_method" name="chunk_method">
                                     <option value="sentences" selected>sentences</option>
                                    <option value="recursive">recursive</option>
                                    <option value="token">token</option>
                                    <option value="character">character</option>
                                    <!-- Add other ChunkMethod enums -->
                                </select>
                            </div>
                             <div class="form-group">
                                <label for="processAudios_chunk_language">Chunk Language Override:</label>
                                <input type="text" id="processAudios_chunk_language" name="chunk_language">
                            </div>
                            <div class="form-group">
                                <label for="processAudios_chunk_size">Chunk Size:</label>
                                <input type="number" id="processAudios_chunk_size" name="chunk_size" value="500">
                            </div>
                            <div class="form-group">
                                <label for="processAudios_chunk_overlap">Chunk Overlap:</label>
                                <input type="number" id="processAudios_chunk_overlap" name="chunk_overlap" value="200">
                            </div>
                            <div class="form-group">
                                <label for="processAudios_custom_chapter_pattern">Custom Chapter Pattern (Regex):</label>
                                <input type="text" id="processAudios_custom_chapter_pattern" name="custom_chapter_pattern">
                            </div>
                            <h3>Contextual Chunking</h3>
                            <div class="form-group checkbox-group" style="display:flex; gap:12px; align-items:center;">
                                <input type="checkbox" id="processAudios_enable_contextual_chunking" name="enable_contextual_chunking">
                                <label for="processAudios_enable_contextual_chunking">Enable Contextual Chunking</label>
                            </div>
                            <div class="form-group">
                                <label for="processAudios_contextual_llm_model">Contextual LLM Model:</label>
                                <input type="text" id="processAudios_contextual_llm_model" name="contextual_llm_model" placeholder="e.g., gpt-3.5-turbo">
                            </div>
                            <div class="form-group">
                                <label for="processAudios_context_window_size">Context Window Size (chars):</label>
                                <input type="number" id="processAudios_context_window_size" name="context_window_size" placeholder="e.g., 1200">
                            </div>
                            <div class="form-group">
                                <label for="processAudios_context_strategy">Context Strategy:</label>
                                <select id="processAudios_context_strategy" name="context_strategy">
                                    <option value="">(default: auto)</option>
                                    <option value="auto">auto</option>
                                    <option value="full">full</option>
                                    <option value="window">window</option>
                                    <option value="outline_window">outline_window</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processAudios_context_token_budget">Context Token Budget (auto):</label>
                                <input type="number" id="processAudios_context_token_budget" name="context_token_budget" placeholder="e.g., 6000">
                            </div>
                        </div>
                    </div>
                    <button class="api-button" onclick="makeRequest('processAudios', 'POST', '/api/v1/media/process-audios', 'form')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="processAudios_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="processAudios_response">---</pre>
                </div>

                <!-- POST /api/v1/media/process-ebooks -->
                <div class="endpoint-section" id="processEbooks">
                    <h2>POST /api/v1/media/process-ebooks - Process Ebooks (No DB)</h2>
                    <p>
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Ebooks.md" target="_blank">Docs</a>
                    </p>
                    <p>Media type is fixed to "ebook", keep_original_file is false.</p>
                    <div class="columns">
                        <div class="column">
                            <h3>Sources & Info</h3>
                            <div class="form-group">
                                <label for="processEbooks_urls">URLs (one per line, .epub):</label>
                                <textarea id="processEbooks_urls" name="urls"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_files">Files (.epub):</label>
                                <input type="file" id="processEbooks_files" name="files" multiple accept=".epub">
                            </div>
                             <div class="form-group">
                                <label for="processEbooks_title">Title Override:</label>
                                <input type="text" id="processEbooks_title" name="title">
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_author">Author Override:</label>
                                <input type="text" id="processEbooks_author" name="author">
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_keywords_str">Keywords (comma-separated):</label>
                                <input type="text" id="processEbooks_keywords_str" name="keywords_str">
                            </div>
                             <div class="form-group">
                                <label for="processEbooks_extraction_method">Extraction Method:</label>
                                <select id="processEbooks_extraction_method" name="extraction_method">
                                    <option value="filtered">filtered</option>
                                    <option value="markdown">markdown</option>
                                    <option value="basic">basic</option>
                                </select>
                            </div>
                        </div>
                        <div class="column">
                            <h3>Processing & Chunking Options</h3>
                             <div class="form-group checkbox-group">
                                <div><input type="checkbox" id="processEbooks_perform_analysis" name="perform_analysis" checked> <label for="processEbooks_perform_analysis">Perform Analysis</label></div>
                                <div><input type="checkbox" id="processEbooks_summarize_recursively" name="summarize_recursively"> <label for="processEbooks_summarize_recursively">Summarize Recursively</label></div>
                                <div><input type="checkbox" id="processEbooks_perform_chunking" name="perform_chunking" checked> <label for="processEbooks_perform_chunking">Perform Chunking</label></div>
                                <input type="hidden" id="processEbooks_overwrite_existing" name="overwrite_existing" value="false">
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_chunk_method">Chunk Method:</label>
                                <select id="processEbooks_chunk_method" name="chunk_method">
                                    <option value="ebook_chapters" selected>ebook_chapters</option>
                                    <option value="recursive">recursive</option>
                                    <option value="sentences">sentences</option>
                                    <option value="token">token</option>
                                    <option value="character">character</option>
                                    <!-- Add other ChunkMethod enums -->
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_chunk_size">Chunk Size (for non-chapter):</label>
                                <input type="number" id="processEbooks_chunk_size" name="chunk_size" value="1500">
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_chunk_overlap">Chunk Overlap (for non-chapter):</label>
                                <input type="number" id="processEbooks_chunk_overlap" name="chunk_overlap" value="200">
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_custom_chapter_pattern">Custom Chapter Pattern (Regex):</label>
                                <input type="text" id="processEbooks_custom_chapter_pattern" name="custom_chapter_pattern">
                            </div>
                            <h3>Contextual Chunking</h3>
                            <div class="form-group checkbox-group" style="display:flex; gap:12px; align-items:center;">
                                <input type="checkbox" id="processEbooks_enable_contextual_chunking" name="enable_contextual_chunking">
                                <label for="processEbooks_enable_contextual_chunking">Enable Contextual Chunking</label>
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_contextual_llm_model">Contextual LLM Model:</label>
                                <input type="text" id="processEbooks_contextual_llm_model" name="contextual_llm_model" placeholder="e.g., gpt-3.5-turbo">
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_context_window_size">Context Window Size (chars):</label>
                                <input type="number" id="processEbooks_context_window_size" name="context_window_size" placeholder="e.g., 1200">
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_context_strategy">Context Strategy:</label>
                                <select id="processEbooks_context_strategy" name="context_strategy">
                                    <option value="">(default: auto)</option>
                                    <option value="auto">auto</option>
                                    <option value="full">full</option>
                                    <option value="window">window</option>
                                    <option value="outline_window">outline_window</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_context_token_budget">Context Token Budget (auto):</label>
                                <input type="number" id="processEbooks_context_token_budget" name="context_token_budget" placeholder="e.g., 6000">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                         <div class="column">
                            <h3>Prompts & API (for Analysis)</h3>
                            <div class="form-group">
                                <label for="processEbooks_custom_prompt">Custom Prompt:</label>
                                <textarea id="processEbooks_custom_prompt" name="custom_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_system_prompt">System Prompt:</label>
                                <textarea id="processEbooks_system_prompt" name="system_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processEbooks_model">Model for Analysis:</label>
                                <select id="processEbooks_model" class="llm-model-select" name="api_name">
                                    <option value="">Loading models...</option>
                                </select>
                            </div>
                            <!-- api_key input removed - SECURITY: API keys are retrieved from server config -->
                        </div>
                    </div>
                    <button class="api-button" onclick="makeRequest('processEbooks', 'POST', '/api/v1/media/process-ebooks', 'form')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="processEbooks_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="processEbooks_response">---</pre>
                </div>

                <!-- POST /api/v1/media/process-documents -->
                <div class="endpoint-section" id="processDocuments">
                    <h2>POST /api/v1/media/process-documents - Process Documents (No DB)</h2>
                    <p>
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_Documents.md" target="_blank">Docs</a>
                    </p>
                    <p>Media type is fixed to "document", keep_original_file is false.</p>
                     <div class="columns">
                        <div class="column">
                            <h3>Sources & Info</h3>
                            <div class="form-group">
                                <label for="processDocuments_urls">URLs (one per line, .txt, .docx, etc.):</label>
                                <textarea id="processDocuments_urls" name="urls"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_files">Files (.txt, .md, .docx, .rtf, .html, .htm, .xml):</label>
                                <input type="file" id="processDocuments_files" name="files" multiple accept=".txt,.md,.docx,.rtf,.html,.htm,.xml">
                            </div>
                             <div class="form-group">
                                <label for="processDocuments_title">Title Override:</label>
                                <input type="text" id="processDocuments_title" name="title">
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_author">Author Override:</label>
                                <input type="text" id="processDocuments_author" name="author">
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_keywords_str">Keywords (comma-separated):</label>
                                <input type="text" id="processDocuments_keywords_str" name="keywords_str">
                            </div>
                        </div>
                        <div class="column">
                            <h3>Processing & Chunking Options</h3>
                             <div class="form-group checkbox-group">
                                <div><input type="checkbox" id="processDocuments_perform_analysis" name="perform_analysis" checked> <label for="processDocuments_perform_analysis">Perform Analysis</label></div>
                                <div><input type="checkbox" id="processDocuments_summarize_recursively" name="summarize_recursively"> <label for="processDocuments_summarize_recursively">Summarize Recursively</label></div>
                                <div><input type="checkbox" id="processDocuments_perform_chunking" name="perform_chunking" checked> <label for="processDocuments_perform_chunking">Perform Chunking</label></div>
                                <input type="hidden" id="processDocuments_overwrite_existing" name="overwrite_existing" value="false">
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_chunk_method">Chunk Method:</label>
                                <select id="processDocuments_chunk_method" name="chunk_method">
                                    <option value="sentences" selected>sentences</option>
                                    <option value="recursive">recursive</option>
                                    <option value="markdown">markdown</option>
                                    <option value="token">token</option>
                                    <option value="character">character</option>
                                    <!-- Add other ChunkMethod enums -->
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_chunk_size">Chunk Size:</label>
                                <input type="number" id="processDocuments_chunk_size" name="chunk_size" value="1000">
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_chunk_overlap">Chunk Overlap:</label>
                                <input type="number" id="processDocuments_chunk_overlap" name="chunk_overlap" value="200">
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_custom_chapter_pattern">Custom Chapter Pattern (Regex):</label>
                                <input type="text" id="processDocuments_custom_chapter_pattern" name="custom_chapter_pattern">
                            </div>
                            <h3>Contextual Chunking</h3>
                            <div class="form-group checkbox-group" style="display:flex; gap:12px; align-items:center;">
                                <input type="checkbox" id="processDocuments_enable_contextual_chunking" name="enable_contextual_chunking">
                                <label for="processDocuments_enable_contextual_chunking">Enable Contextual Chunking</label>
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_contextual_llm_model">Contextual LLM Model:</label>
                                <input type="text" id="processDocuments_contextual_llm_model" name="contextual_llm_model" placeholder="e.g., gpt-3.5-turbo">
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_context_window_size">Context Window Size (chars):</label>
                                <input type="number" id="processDocuments_context_window_size" name="context_window_size" placeholder="e.g., 1200">
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_context_strategy">Context Strategy:</label>
                                <select id="processDocuments_context_strategy" name="context_strategy">
                                    <option value="">(default: auto)</option>
                                    <option value="auto">auto</option>
                                    <option value="full">full</option>
                                    <option value="window">window</option>
                                    <option value="outline_window">outline_window</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_context_token_budget">Context Token Budget (auto):</label>
                                <input type="number" id="processDocuments_context_token_budget" name="context_token_budget" placeholder="e.g., 6000">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                         <div class="column">
                            <h3>Prompts & API (for Analysis)</h3>
                            <div class="form-group">
                                <label for="processDocuments_custom_prompt">Custom Prompt:</label>
                                <textarea id="processDocuments_custom_prompt" name="custom_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_system_prompt">System Prompt:</label>
                                <textarea id="processDocuments_system_prompt" name="system_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processDocuments_model">Model for Analysis:</label>
                                <select id="processDocuments_model" class="llm-model-select" name="api_name">
                                    <option value="">Loading models...</option>
                                </select>
                            </div>
                            <!-- api_key input removed - SECURITY: API keys are retrieved from server config -->
                        </div>
                    </div>
                    <button class="api-button" onclick="makeRequest('processDocuments', 'POST', '/api/v1/media/process-documents', 'form')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="processDocuments_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="processDocuments_response">---</pre>
                </div>

                 <!-- POST /api/v1/media/process-pdfs -->
                <div class="endpoint-section" id="processPdfs">
                    <h2>POST /api/v1/media/process-pdfs - Process PDFs (No DB)</h2>
                    <p>
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_PDF.md" target="_blank">Docs</a>
                    </p>
                    <p>Media type is fixed to "pdf", keep_original_file is false.</p>
                     <div class="columns">
                        <div class="column">
                            <h3>Sources & Info</h3>
                            <div class="form-group">
                                <label for="processPdfs_urls">URLs (one per line, .pdf):</label>
                                <textarea id="processPdfs_urls" name="urls"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_files">Files (.pdf):</label>
                                <input type="file" id="processPdfs_files" name="files" multiple accept=".pdf">
                            </div>
                             <div class="form-group">
                                <label for="processPdfs_title">Title Override:</label>
                                <input type="text" id="processPdfs_title" name="title">
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_author">Author Override:</label>
                                <input type="text" id="processPdfs_author" name="author">
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_keywords">Keywords (comma-separated):</label>
                                <input type="text" id="processPdfs_keywords" name="keywords">
                            </div>
                             <div class="form-group">
                                <label for="processPdfs_pdf_parsing_engine">PDF Parsing Engine:</label>
                                <select id="processPdfs_pdf_parsing_engine" name="pdf_parsing_engine">
                                    <option value="pymupdf4llm">pymupdf4llm</option>
                                    <option value="pymupdf">pymupdf</option>
                                    <option value="docling">docling</option>
                                    <option value="ocr_only">ocr_only</option>
                                </select>
                            </div>
                        </div>
                        <div class="column">
                            <h3>Processing & Chunking Options</h3>
                             <div class="form-group checkbox-group">
                                <div><input type="checkbox" id="processPdfs_perform_analysis" name="perform_analysis" checked> <label for="processPdfs_perform_analysis">Perform Analysis</label></div>
                                <div><input type="checkbox" id="processPdfs_summarize_recursively" name="summarize_recursively"> <label for="processPdfs_summarize_recursively">Summarize Recursively</label></div>
                                <div><input type="checkbox" id="processPdfs_perform_chunking" name="perform_chunking" checked> <label for="processPdfs_perform_chunking">Perform Chunking</label></div>
                                <input type="hidden" id="processPdfs_overwrite_existing" name="overwrite_existing" value="false">
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_chunk_method">Chunk Method:</label>
                                <select id="processPdfs_chunk_method" name="chunk_method">
                                    <option value="sentences" selected>sentences</option>
                                    <option value="recursive">recursive</option>
                                    <option value="page">page</option>
                                    <option value="layout">layout</option>
                                    <option value="token">token</option>
                                    <option value="character">character</option>
                                    <!-- Add other ChunkMethod enums -->
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_chunk_size">Chunk Size:</label>
                                <input type="number" id="processPdfs_chunk_size" name="chunk_size" value="500">
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_chunk_overlap">Chunk Overlap:</label>
                                <input type="number" id="processPdfs_chunk_overlap" name="chunk_overlap" value="200">
                            </div>
                             <div class="form-group">
                                <label for="processPdfs_custom_chapter_pattern">Custom Chapter Pattern (Regex, for chunking):</label>
                                <input type="text" id="processPdfs_custom_chapter_pattern" name="custom_chapter_pattern">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                         <div class="column">
                            <h3>Prompts & API (for Analysis)</h3>
                            <div class="form-group">
                                <label for="processPdfs_custom_prompt">Custom Prompt:</label>
                                <textarea id="processPdfs_custom_prompt" name="custom_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_system_prompt">System Prompt:</label>
                                <textarea id="processPdfs_system_prompt" name="system_prompt"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="processPdfs_api_name">API Name:</label>
                                <input type="text" id="processPdfs_api_name" name="api_name">
                            </div>
                            <!-- api_key input removed - SECURITY: API keys are retrieved from server config -->
                        </div>
                    </div>
                    <button class="api-button" onclick="makeRequest('processPdfs', 'POST', '/api/v1/media/process-pdfs', 'form')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="processPdfs_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="processPdfs_response">---</pre>
                </div>
            </div>

             <!-- MediaWiki Processing Tab -->
            <div id="tabMediaWiki" class="tab-content">
                <!-- POST /api/v1/media/mediawiki/ingest-dump -->
                <div class="endpoint-section" id="ingestMediaWikiDump">
                    <h2>POST /api/v1/media/mediawiki/ingest-dump</h2>
                    <p>
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_MediaWiki.md" target="_blank">Docs</a>
                    </p>
                    <p>Ingest and process a MediaWiki XML dump, storing results to database and vector store. Response is streamed.</p>
                    <div class="form-group">
                        <label for="ingestMediaWikiDump_dump_file">MediaWiki XML Dump File (.xml, .xml.bz2, .xml.gz):</label>
                        <input type="file" id="ingestMediaWikiDump_dump_file" name="dump_file" accept=".xml,.xml.bz2,.xml.gz">
                    </div>
                    <div class="form-group">
                        <label for="ingestMediaWikiDump_wiki_name">Wiki Name (Unique Identifier):</label>
                        <input type="text" id="ingestMediaWikiDump_wiki_name" name="wiki_name" value="my_wiki">
                    </div>
                    <div class="form-group">
                        <label for="ingestMediaWikiDump_namespaces_str">Namespaces (comma-separated IDs, e.g., '0,1', All if empty):</label>
                        <input type="text" id="ingestMediaWikiDump_namespaces_str" name="namespaces_str" placeholder="0,14">
                    </div>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="ingestMediaWikiDump_skip_redirects" name="skip_redirects" checked> <label for="ingestMediaWikiDump_skip_redirects">Skip Redirect Pages</label>
                    </div>
                    <div class="form-group">
                        <label for="ingestMediaWikiDump_chunk_max_size">Chunk Max Size:</label>
                        <input type="number" id="ingestMediaWikiDump_chunk_max_size" name="chunk_max_size" value="1000">
                    </div>
                    <div class="form-group">
                        <label for="ingestMediaWikiDump_api_name_vector_db">API Name (Vector DB Embedding):</label>
                        <input type="text" id="ingestMediaWikiDump_api_name_vector_db" name="api_name_vector_db">
                    </div>
                    <!-- api_key_vector_db input removed - SECURITY: API keys are retrieved from server config -->
                    <button class="api-button" onclick="makeRequest('ingestMediaWikiDump', 'POST', '/api/v1/media/mediawiki/ingest-dump', 'form', {}, 'stream')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="ingestMediaWikiDump_curl">---</pre>
                    <h3>Response (Streaming NDJSON):</h3>
                    <pre id="ingestMediaWikiDump_response">---</pre>
                </div>

                <!-- POST /api/v1/media/mediawiki/process-dump -->
                <div class="endpoint-section" id="processMediaWikiDump">
                    <h2>POST /api/v1/media/mediawiki/process-dump</h2>
                    <p>
                        <a href="/docs-static/Code_Documentation/Ingestion_Pipeline_MediaWiki.md" target="_blank">Docs</a>
                    </p>
                    <p>Process a MediaWiki XML dump and return structured content without database storage. Response is streamed.</p>
                     <div class="form-group">
                        <label for="processMediaWikiDump_dump_file">MediaWiki XML Dump File (.xml, .xml.bz2, .xml.gz):</label>
                        <input type="file" id="processMediaWikiDump_dump_file" name="dump_file" accept=".xml,.xml.bz2,.xml.gz">
                    </div>
                    <div class="form-group">
                        <label for="processMediaWikiDump_wiki_name">Wiki Name:</label>
                        <input type="text" id="processMediaWikiDump_wiki_name" name="wiki_name" value="processed_wiki">
                    </div>
                    <div class="form-group">
                        <label for="processMediaWikiDump_namespaces_str">Namespaces (comma-separated IDs, e.g., '0,1', All if empty):</label>
                        <input type="text" id="processMediaWikiDump_namespaces_str" name="namespaces_str" placeholder="0">
                    </div>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="processMediaWikiDump_skip_redirects" name="skip_redirects" checked> <label for="processMediaWikiDump_skip_redirects">Skip Redirect Pages</label>
                    </div>
                    <div class="form-group">
                        <label for="processMediaWikiDump_chunk_max_size">Chunk Max Size:</label>
                        <input type="number" id="processMediaWikiDump_chunk_max_size" name="chunk_max_size" value="1000">
                    </div>
                    <!-- api_name_vector_db and api_key_vector_db are ignored if store_to_vector_db is False, but form dep expects them -->
                    <input type="hidden" id="processMediaWikiDump_api_name_vector_db" name="api_name_vector_db" value="">
                    <!-- api_key_vector_db input removed - SECURITY: API keys are retrieved from server config -->

                    <button class="api-button" onclick="makeRequest('processMediaWikiDump', 'POST', '/api/v1/media/mediawiki/process-dump', 'form', {}, 'stream')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="processMediaWikiDump_curl">---</pre>
                    <h3>Response (Streaming NDJSON):</h3>
                    <pre id="processMediaWikiDump_response">---</pre>
                </div>
            </div>


            <!-- Web Scraping Tab -->
            <div id="tabWebScraping" class="tab-content">
                 <!-- POST /api/v1/media/ingest-web-content -->
                <div class="endpoint-section" id="ingestWebContent">
                    <h2>POST /api/v1/media/ingest-web-content</h2>
                    <div class="form-group">
                        <label for="ingestWebContent_payload">Payload (IngestWebContentRequest JSON):</label>
                        <textarea id="ingestWebContent_payload" style="min-height: 300px;">{
    "urls": ["https://example.com/article1"],
    "scrape_method": "individual",
    "titles": ["Optional Title 1"],
    "authors": ["Author 1"],
    "keywords": ["keywordA,keywordB"],
    "perform_analysis": true,
    "custom_prompt": "Summarize this briefly.",
    "system_prompt": "You are a concise summarizer.",
    "api_name": null,
    "perform_translation": false,
    "translation_language": "en",
    "perform_chunking": true,
    "chunk_method": "sentences",
    "chunk_size": 500,
    "chunk_overlap": 50,
    "timestamp_option": true,
    "overwrite_existing": false,
    "max_pages": 10,
    "max_depth": 2,
    "url_level": 1,
    "use_cookies": false,
    "cookies": null,
    "perform_rolling_summarization": false,
    "perform_confabulation_check_of_analysis": false,
    "custom_chapter_pattern": null
}</textarea>
                        <small>Scrape Methods for <code>scrape_method</code>: "individual", "sitemap", "url_level", "recursive".</small>
                    </div>
                    <button class="api-button" onclick="makeRequest('ingestWebContent', 'POST', '/api/v1/media/ingest-web-content', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="ingestWebContent_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="ingestWebContent_response">---</pre>
                </div>

                <!-- POST /api/v1/media/process-web-scraping -->
                <div class="endpoint-section" id="processWebScraping">
                    <h2>POST /api/v1/media/process-web-scraping</h2>
                    <div class="form-group">
                        <label for="processWebScraping_payload">Payload (WebScrapingRequest JSON):</label>
                        <textarea id="processWebScraping_payload" style="min-height: 300px;">{
    "scrape_method": "Individual URLs",
    "url_input": "https://example.com/article1\\nhttps://example.com/article2",
    "url_level": null,
    "max_pages": 10,
    "max_depth": 3,
    "summarize_checkbox": true,
    "custom_prompt": "Please summarize with bullet points only.",
    "api_name": null,
    "keywords": "web, scraping, example",
    "custom_titles": "Article 1 Title\\nArticle 2 Title",
    "system_prompt": "You are a bulleted-notes specialist...",
    "temperature": 0.7,
    "custom_cookies": null,
    "mode": "persist"
}</textarea>
                        <small>Scrape Methods for <code>scrape_method</code>: "Individual URLs", "Sitemap", "URL Level", "Recursive Scraping". Mode: "persist" or "ephemeral".</small>
                    </div>
                    <button class="api-button" onclick="makeRequest('processWebScraping', 'POST', '/api/v1/media/process-web-scraping', 'json')">Send Request</button>
                    <h3>cURL Command:</h3>
                    <pre id="processWebScraping_curl">---</pre>
                    <h3>Response:</h3>
                    <pre id="processWebScraping_response">---</pre>
                </div>
            </div>

            <!-- Media Analysis Tab -->
            <div id="tabMediaAnalysis" class="tab-content">
                <h2>Media Analysis</h2>
                <p>Analyze media content using custom or saved prompts with LLM models</p>

                <!-- Media Selection Section -->
                <div class="endpoint-section">
                    <h3>1. Select Media Item</h3>
                    <div class="form-group">
                        <label for="analysisMediaSearch">Search Media:</label>
                        <input type="text" id="analysisMediaSearch" placeholder="Search by title, author, or keywords..." />
                        <button class="api-button" onclick="searchMediaForAnalysis()">Search</button>
                    </div>

                    <!-- Quick Identifier Lookup -->
                    <div class="form-group">
                        <h4>Or Find by Identifier:</h4>
                        <div style="display:flex; gap:8px; flex-wrap: wrap;">
                            <input type="text" id="analysisLookup_doi" placeholder="DOI">
                            <input type="text" id="analysisLookup_pmid" placeholder="PMID">
                            <input type="text" id="analysisLookup_pmcid" placeholder="PMCID">
                            <input type="text" id="analysisLookup_arxiv" placeholder="arXiv ID">
                            <input type="text" id="analysisLookup_s2" placeholder="S2 paperId">
                            <button class="api-button" onclick="byIdentifierSelectForAnalysis()">Find & Load</button>
                        </div>
                    </div>

                    <!-- Browse All Media Section -->
                    <div class="form-group">
                        <h4>Or Browse All Media:</h4>
                        <div id="mediaBrowseSection">
                            <div class="media-browse-controls" style="margin-bottom: 10px;">
                                <button id="loadMediaListBtn" class="api-button" onclick="mediaAnalysisManager.loadAllMedia(1)">Load Media List</button>
                                <button id="refreshMediaListBtn" class="api-button" onclick="mediaAnalysisManager.loadAllMedia(mediaAnalysisManager.currentPage)" style="display: none;">Refresh</button>
                            </div>
                            <div id="allMediaList" class="media-list-container"></div>
                            <div id="mediaPagination" class="pagination-controls">
                                <button id="mediaPrevPage" class="api-button" onclick="mediaAnalysisManager.previousPage()" disabled>Previous</button>
                                <span id="mediaPageInfo" class="page-info">Page 1 of 1</span>
                                <button id="mediaNextPage" class="api-button" onclick="mediaAnalysisManager.nextPage()">Next</button>
                            </div>
                        </div>
                    </div>

                    <!-- Search Results -->
                    <div id="analysisMediaResults" class="search-results"></div>

                    <!-- Selected Media Display -->
                    <div id="selectedMediaForAnalysis" class="selected-media"></div>

                    <!-- Media Content Textarea -->
                    <div id="mediaContentSection" style="display: none; margin-top: 20px;">
                        <div class="form-group">
                            <label for="analysisMediaContent">Media Content (editable):</label>
                            <textarea id="analysisMediaContent" rows="10" placeholder="Media content will appear here. You can edit it before sending for analysis..." style="width: 100%; font-family: monospace;"></textarea>
                        </div>
                        <div class="form-group">
                            <button class="api-button" onclick="mediaCreateFlashcardsFromHighlighted()">Create Flashcards from Highlighted Text</button>
                        </div>
                    </div>
                </div>

                <!-- Prompt Selection Section -->
                <div class="endpoint-section">
                    <h3>2. Configure Analysis Prompt</h3>

                    <div class="form-group">
                        <label for="analysisPromptSource">Prompt Source:</label>
                        <select id="analysisPromptSource" onchange="togglePromptSource()">
                            <option value="custom">Custom Prompt</option>
                            <option value="saved">Select from Saved Prompts</option>
                        </select>
                    </div>

                    <!-- Custom Prompt -->
                    <div id="customPromptSection">
                        <div class="form-group">
                            <label for="analysisUserPrompt">User Prompt:</label>
                            <textarea id="analysisUserPrompt" rows="4" placeholder="Enter your analysis instructions...">Analyze the following content and provide a comprehensive summary highlighting key points, themes, and insights.</textarea>
                        </div>
                    </div>

                    <!-- Saved Prompts -->
                    <div id="savedPromptSection" style="display: none;">
                        <div class="form-group">
                            <label for="savedPromptSelect">Select Saved Prompt:</label>
                            <select id="savedPromptSelect" onchange="loadPromptDetails()">
                                <option value="">Loading prompts...</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="savedPromptUserPrompt">User Prompt (editable):</label>
                            <textarea id="savedPromptUserPrompt" rows="4" placeholder="Selected prompt will appear here for editing..."></textarea>
                        </div>
                        <div class="form-group">
                            <label for="savedPromptSystemPrompt">System Prompt (editable):</label>
                            <textarea id="savedPromptSystemPrompt" rows="2" placeholder="System prompt will appear here for editing..."></textarea>
                        </div>
                    </div>

                    <div class="form-group" id="customSystemPromptSection">
                        <label for="analysisSystemPrompt">System Prompt (Optional):</label>
                        <textarea id="analysisSystemPrompt" rows="2" placeholder="Optional system instructions for the model...">You are a helpful assistant that provides detailed and insightful analysis of content.</textarea>
                    </div>
                </div>

                <!-- Model Selection Section -->
                <div class="endpoint-section">
                    <h3>3. Select Model</h3>

                    <div class="form-group">
                        <label for="analysisModelSelect">LLM Model:</label>
                        <select id="analysisModelSelect" class="llm-model-select">
                            <option value="">Loading models...</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="analysisTemperature">Temperature:</label>
                        <input type="number" id="analysisTemperature" min="0" max="2" step="0.1" value="0.7" />
                    </div>

                    <div class="form-group">
                        <label for="analysisMaxTokens">Max Tokens:</label>
                        <input type="number" id="analysisMaxTokens" min="100" max="8000" value="2000" />
                    </div>

                    <div class="form-group">
                        <input type="checkbox" id="analysisStreaming" checked />
                        <label for="analysisStreaming">Enable Streaming Response</label>
                    </div>
                </div>

                <!-- Run Analysis Section -->
                <div class="endpoint-section">
                    <h3>4. Run Analysis</h3>

                    <button class="api-button primary" onclick="runMediaAnalysis()" id="runAnalysisBtn">
                        Run Analysis
                    </button>

                    <!-- Analysis Response -->
                    <div id="analysisResponse" style="margin-top: 20px;">
                        <h4>Analysis Result</h4>
                        <div id="analysisLoading" style="display: none;">
                            <p>🔄 Analyzing content...</p>
                            <div id="streamingResponse" style="padding: 10px; background: #f0f0f0; border-radius: 5px; min-height: 100px; white-space: pre-wrap;"></div>
                        </div>
                        <div id="analysisResult" style="display: none;">
                            <div class="form-group">
                                <label>Analysis:</label>
                                <div id="analysisContent" style="padding: 10px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; white-space: pre-wrap;"></div>
                            </div>
                            <div style="margin-top: 10px;">
                                <button class="api-button" onclick="saveAnalysisToMedia()">Save to Media Item</button>
                                <button class="api-button" onclick="copyAnalysisToClipboard()">Copy to Clipboard</button>
                                <button class="api-button" onclick="downloadAnalysisAsText()">Download as Text</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Existing Analyses Section -->
                <div class="endpoint-section">
                    <h3>5. Existing Analyses</h3>

                    <button class="api-button" onclick="loadExistingAnalyses()">Load Analyses for Selected Media</button>

                    <div id="existingAnalyses" style="margin-top: 20px;">
                        <div id="analysesList"></div>
                    </div>
                </div>
            </div>

<script>

// Initialize media tabs
function initializeMediaTabs() {
    console.log('Media tabs initialized');
    // Populate model dropdowns when tab is initialized
    populateModelDropdowns();
}

// Override the form submission to extract just the provider name from model selection
document.addEventListener('DOMContentLoaded', () => {
    // For each model dropdown in media processing, extract just provider name before form submission
    const modelSelects = document.querySelectorAll('#addMedia_model, #processVideos_model, #processAudios_model, #processEbooks_model, #processDocuments_model');

    modelSelects.forEach(select => {
        if (select) {
            // Store the original name attribute
            const originalName = select.getAttribute('name');

            // Update the value before form submission
            select.addEventListener('change', function() {
                if (this.value && this.value.includes('/')) {
                    // Extract provider name from "provider/model" format
                    const provider = this.value.split('/')[0];
                    // Create a hidden input with the provider name
                    let hiddenInput = this.parentElement.querySelector('input[type="hidden"][name="' + originalName + '"]');
                    if (!hiddenInput) {
                        hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = originalName;
                        this.parentElement.appendChild(hiddenInput);
                    }
                    hiddenInput.value = provider;
                    // Remove the name from select so it doesn't submit
                    this.removeAttribute('name');
                } else {
                    // If no value or doesn't contain /, restore original name
                    this.setAttribute('name', originalName);
                    // Remove any hidden input
                    const hiddenInput = this.parentElement.querySelector('input[type="hidden"][name="' + originalName + '"]');
                    if (hiddenInput) {
                        hiddenInput.remove();
                    }
                }
            });
        }
    });
});
</script>

<!-- Media Analysis JavaScript -->
<script src="js/media-analysis.js"></script>
<script>
// Initialize Media Analysis tab when it becomes visible
document.addEventListener('DOMContentLoaded', function() {
    // Add observer for tab changes
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.target.id === 'tabMediaAnalysis' &&
                mutation.attributeName === 'style' &&
                mutation.target.style.display !== 'none') {
                // Tab is now visible, initialize if needed
                if (typeof initializeMediaAnalysis === 'function') {
                    initializeMediaAnalysis();
                }
            }
        });
    });

    // Observe the Analysis tab for visibility changes
    const analysisTab = document.getElementById('tabMediaAnalysis');
    if (analysisTab) {
        observer.observe(analysisTab, {
            attributes: true,
            attributeFilter: ['style']
        });
    }
});
</script>
